<template>
    <ul class="spell">
        <li v-for="key of phone"
        :key="key" @click="$emit('selects',key)" @touchmove="alph" :ref="key"
        @touchstart="handleStart"
        @touchend="handleEnd"
        >
          {{key}}
        </li>
    </ul>
</template>

<script>
export default {
  name: 'CitySpell',
  props: {
    list: Object
  },
  data () {
    return {
      isMove: false
    }
  },
  methods: {
    handleStart () {
      this.isMove = true
    },
    handleEnd () {
      this.isMove = false
    },
    alph (e) {
      if (this.isMove) {
        let mounthTop = e.touches[0].pageY
        let AToTop = this.$refs['A'][0].offsetTop
        let hesderTop = (mounthTop - 99) - AToTop
        let spellTo = Math.floor(hesderTop / 20)
        let index = this.phone[spellTo]
        if (index) {
          this.$emit('selects', index)
        }
      }
    }
  },
  computed: {
    phone () {
      let arr = []
      if (this.list) {
        for (let key in this.list) {
          arr.push(key)
        }
      }
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .spell
    display flex
    flex-direction column
    justify-content center
    position fixed
    top 1.98rem
    right 0.2rem
    bottom 0
    overflow hidden
    width 0.4rem
    text-align center
    li
      color #00BCD4
      height 0.4rem
</style>
